import QtQuick 2.4
import QtQuick.Controls 2.3
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0
import QtQuick.Window 2.10
import QtQuick.Dialogs 1.2

Item {
    id: item_main
    property real p_value: 0
    property real ug_value: 0
    property real q_value: 0
    property real il_value: 0
    property int frame_leftmargin: 320
    //    scale: height/contentHeight<width/contentWidth?height/contentHeight:width/contentWidth
    //    scale: height/480<width/640?height/480:width/640
    //    contentHeight: 480
    //    contentWidth: 640

    Item {
        id: row_main
        width: 640
        height: 480
        transformOrigin: Item.TopLeft
        anchors.fill: parent

        Rectangle {
            id: window_left_column
            width: (parent.width-window_middle_rectangle.width)/2
            height: parent.height
            anchors.verticalCenter: parent.verticalCenter
            anchors.top: parent.top

            Dash2 {
                id: dash2
                dashneedle_Rotation: ug_value
                dash_type: "Ug"
                transformOrigin: Item.Top
                scale: (parent.width/width)<(parent.height/height/2)?(parent.width/width):(parent.height/height/2)
                anchors.horizontalCenter: parent.horizontalCenter
            }

            Dash2 {
                id: dash21
                anchors.topMargin: dash2.height*(dash2.scale-1)
                anchors.top: dash2.bottom
                dashneedle_Rotation: il_value
                dash_type: "IL"
                transformOrigin: Item.Top
                scale: parent.width/width<(parent.height/height/2)?parent.width/width:(parent.height/height/2)
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }

        Rectangle {
            id: window_right_column
            width: (parent.width-window_middle_rectangle.width)/2
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            anchors.top: parent.top

            Dash3 {
                id: dash3
                dashneedle_Rotation: p_value
                transformOrigin: Item.TopLeft
                dash_type: "P"
                scale: parent.width/width<(parent.height/height/2)?parent.width/width:(parent.height/height/2)
            }

            Dash3 {
                id: dash31
                anchors.topMargin: dash2.height*(dash2.scale-1)
                anchors.top: dash3.bottom
                dashneedle_Rotation: q_value
                transformOrigin: Item.TopLeft
                dash_type: "Q"
                scale: parent.width/width<(parent.height/height/2)?parent.width/width:(parent.height/height/2)
            }
        }


        MouseArea {
            id: mouseArea_win_left_right
            anchors.fill: parent

            Rectangle {
                id: mouseArea_win_left_right_rectangle
//                color: "#f4c6c6"
                anchors.fill: parent
                opacity: 0.4
                visible: false
                property double wave_offset: 0.0
                property color wave_color: "#55bde5"
                LinearGradient{
                    id: gradient
                    anchors.fill: parent
                    start: Qt.point(0, 0);
                    end: Qt.point(width, 0);
//                    horizontalRadius: 0
//                    verticalRadius: 0
//                    horizontalOffset: 0
//                    verticalOffset: 0
                    gradient: Gradient{
                        GradientStop{
                            position:
                                (mouseArea_win_left_right_rectangle.wave_offset>0.1)?(mouseArea_win_left_right_rectangle.wave_offset-0.1):0
                            color: "transparent"
                        }
                        GradientStop{
                            position: mouseArea_win_left_right_rectangle.wave_offset+0.09;
                            color: mouseArea_win_left_right_rectangle.wave_color
                        }
                        GradientStop{
                            position: mouseArea_win_left_right_rectangle.wave_offset+0.11;
                            color: "transparent"
                        }
                        GradientStop{
                            position: 1-(mouseArea_win_left_right_rectangle.wave_offset+0.11);
                            color: "transparent"
                        }
                        GradientStop{
                            position: 1-(mouseArea_win_left_right_rectangle.wave_offset+0.09);
                            color: mouseArea_win_left_right_rectangle.wave_color
                        }

                        GradientStop{
                            position:
                                (mouseArea_win_left_right_rectangle.wave_offset>0.1)?
                                    (1-(mouseArea_win_left_right_rectangle.wave_offset-0.1)):1
                            color: "transparent"
                        }
                    }
                }
                PropertyAnimation{
                    id: mouseArea_win_left_right_rectangle_animation
                    target: mouseArea_win_left_right_rectangle
                    property: "wave_offset"
                    easing.type: Easing.OutCubic
                    from:0
                    to:0.4
                    duration: 400
                    running: false
                    onStarted: mouseArea_win_left_right_rectangle.visible=true
                    onStopped: mouseArea_win_left_right_rectangle.visible=false
                }
            }


        }

        Rectangle {
            id: window_middle_rectangle
            color: "#55bde5"
//            property int width_factor: 10
//            width: parent.width*width_factor/100
            state: "state1"
            height: parent.height
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.leftMargin: 0
            anchors.verticalCenter: parent.verticalCenter
            anchors.top: parent.top

            states: [
                State {
                    name: "state1"
                    PropertyChanges {
                        target: window_middle_rectangle
                        width:row_main.width*0.1
                    }
                },
                State {
                    name: "state2"
                    PropertyChanges {
                        target: window_middle_rectangle
                        width:row_main.width*0.33
                    }
                }
            ]

            MouseArea {
                id: mouseArea_winmid_rectangle
                width: parent.width
                height: parent.height

                EXC_Clickwave{
                    id: mouseArea_winmid_click_wave
                    width: 30
                    height: 30
                    x:100
                    y: 300
                    wave_color:"grey"
                }
            }

            Slider {
                id: slider
                anchors.verticalCenter: parent.verticalCenter
                opacity: 1
                focusPolicy: Qt.NoFocus
                from: 0
                anchors.horizontalCenter: parent.horizontalCenter
                stepSize: 0
                transformOrigin: Item.Center
                rotation: 90
            }

            SequentialAnimation{
                id: window_mid_seqani_show
                NumberAnimation {
                    //                    id:winmid_numani_expansion
                    target: window_middle_rectangle
                    property: "width"
                    to:row_main.width*33/100
                    duration: 500
                    easing.type: Easing.OutCubic
                }
                SpringAnimation {
                    //                    id:midscr_numani_show
                    target: eXC_Control_ButtonBox
                    property: "anchors.bottomMargin"
                    damping: 0.2
                    epsilon: 0.01
                    spring: 1
                    to:-height
                    easing.type: Easing.InOutQuad
                }
            }

            SequentialAnimation{
                id: window_mid_seqani_hide
                NumberAnimation {
                    //                    id:midscr_numani_hide
                    target: eXC_Control_ButtonBox
                    property: "anchors.bottomMargin"
                    to:height
                    duration: 500
                    easing.type: Easing.InQuart
                }
                NumberAnimation {
                    //                    id:column_middle_numberanimation_narrow
                    target: window_middle_rectangle
                    property: "width"
                    to:row_main.width*10/100
                    duration: 500
                    easing.type: Easing.OutCubic
                }
            }

            EXC_Control_ButtonBox {
                id: eXC_Control_ButtonBox
                property int roch_botmar: 0
                width: parent.width
                height: parent.height
                clip: true
                anchors.horizontalCenter: parent.horizontalCenter
                state: "change1"
                states: [
                    State {
                        name: "change1"
                        PropertyChanges {
                            target: eXC_Control_ButtonBox
                            anchors.bottom: eXC_Control_ButtonBox.parent.top
                            anchors.bottomMargin: 0
                        }
                    },
                    State {
                        name: "change2"
                        PropertyChanges {
                            target: eXC_Control_ButtonBox
                            anchors.bottom: eXC_Control_ButtonBox.parent.bottom
                            anchors.bottomMargin: 0
                        }
                    }
                ]
            }

        }

        EXC_Clickwave{
            id: click_wave
            width: 30
            height: 30
            x:100
            y: 300
        }
    }

    //中间的滑条
    Connections {
        target: slider
        onMoved: {
            print("clicked");
            console.log(slider.value);
            p_value = slider.value*100;
            ug_value = slider.value*100;
        }
    }

    //主选项弹出
    Connections {
        target: mouseArea_winmid_rectangle
        onClicked:
        {
            mouseArea_winmid_click_wave.click(mouse.x,mouse.y)

//            if(eXC_Control_ButtonBox.anchors.bottom===eXC_Control_ButtonBox.parent.top){
                window_mid_seqani_hide.stop()
                window_mid_seqani_show.start()
//            }
        }
    }

    //主选项隐藏
    Connections {
        target: mouseArea_win_left_right
        onClicked:
        {
            click_wave.click(mouse.x,mouse.y)
            if(window_middle_rectangle.width != window_middle_rectangle.parent.width*0.1)
                mouseArea_win_left_right_rectangle_animation.start()
//            if(eXC_Control_ButtonBox.anchors.bottom===eXC_Control_ButtonBox.parent.bottom){
                window_mid_seqani_show.stop();
                window_mid_seqani_hide.start();
//            }
        }
    }

    //主选项弹出完成，修改布局
    Connections {
        target: window_mid_seqani_show
        onStopped:
        {
            window_middle_rectangle.state= "state2"
            eXC_Control_ButtonBox.state="change2"
        }
    }

    //主选项隐藏完成，修改布局
    Connections {
        target: window_mid_seqani_hide
        onStopped:
        {
            window_middle_rectangle.state= "state1"
            eXC_Control_ButtonBox.state="change1"
        }
    }




    function hideAllSvBtn()
    {
        for ( var i=0; i<winmid_sv_main.contentChildren.length; i++)
        {
            if(winmid_sv_main.contentChildren[i].checked)
            {
                winmid_sv_main.contentChildren[i].toggle()
                window_middle_rectangle.children[i+3].animation_hide.start()
            }
        }
    }

    function hideAllSvBtnButThis(button_name)
    {
        for ( var i=0; i<winmid_sv_main.contentChildren.length; i++)
        {
            if(winmid_sv_main.contentChildren[i]!==button_name)
                if(winmid_sv_main.contentChildren[i].checked)
                {
                    winmid_sv_main.contentChildren[i].toggle()
                    window_middle_rectangle.children[i+3].animation_hide.start()
                }
        }
    }
}

















































/*##^## Designer {
    D{i:0;autoSize:true;height:480;width:640}D{i:31;anchors_height:200;anchors_width:200}
}
 ##^##*/
